<template>
    <h3>setup函数详解: </h3>

    <h3>setup 还可以返回一个渲染函数, 该函数可以直接使用同一作用域中的响应式状态</h3>
</template>

<script>
  import {h, ref, reactive} from 'vue'

  export default {
    name: "04.setup函数",
    props: {
      title: String
    },
    /**
     * setup函数接收两个参数:    ======>>>>   让我们更深入地研究如何使用每个参数。
     *  1. props 属性对象,  ==> 它是响应式的 props
     *      注意: props 是响应式的,所以你不能用 ES6解构, 这会消除其 响应式属性.
     *      如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作.
     *
     *  2. context 上下文对象.
     */
    // props 是一个响应式对象,  context 是一个普通的js对象,context 暴露组件的三个属性
    // setup(props, context) {
    //   console.log(123123, props, props.title, context);
    //   console.log('context.attrs --->>>', context.attrs); // 非响应式对象
    //   console.log('context.slots --->>>', context.slots); // 插槽
    //   console.log('context.emit --->>>', context.emit); // 触发事件方法
    // },
    setup() {
      const readerNumber = ref(0)
      const book = reactive({title: "Vue3 guide"})

      // 请注意这里我们需要显式调用 ref 的 value
      // setup 渲染函数返回的内容, 会替换掉当前页面中 template 模板中的内容.
      return () => h('div', [readerNumber.value, book.title])
    }
  }
</script>

<style scoped>

</style>
